<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta author="tianjindong.cn 田金东">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>听到微笑的博客</title>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/nprogress.css">
<link rel="stylesheet" type="text/css" href="/css/style.css">
<link rel="stylesheet" type="text/css" href="/css/font-awesome.min.css">
<link rel="apple-touch-icon-precomposed" href="/images/icon/icon.png">
<link rel="shortcut icon" href="/images/icon/favicon.ico">
<script src="/js/jquery-2.1.4.min.js"></script>
<script src="/js/nprogress.js"></script>
<script src="/js/jquery.lazyload.min.js"></script>
</head>

<body class="user-select">
<jsp:include page="common/top.jsp"/>
<section class="container">
  <div class="content-wrap">
    <div class="content">
      <div class="jumbotron">
        <h1>欢迎访问听到微笑的博客</h1>
        <p>在这里可以看到前端技术，后端程序，网站内容管理系统等文章，还有我的程序人生！</p>
      </div>
      <div id="focusslide" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#focusslide" data-slide-to="0" class="active"></li>
          <li data-target="#focusslide" data-slide-to="1"></li>
          <li data-target="#focusslide" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
          <div class="item active"> <a href="#" onclick="javascript:void(0);"><img src="images/banner/banner_01.jpg" alt="" class="img-responsive"></a> 
            <!--<div class="carousel-caption"> </div>--> 
          </div>
          <div class="item"> <a href="#" onclick="javascript:void(0);"><img src="images/banner/banner_02.png" alt="" class="img-responsive"></a> 
            <!--<div class="carousel-caption"> </div>--> 
          </div>
          <div class="item"> <a href="#" onclick="javascript:void(0);"><img src="images/banner/banner_03.jpg" alt="" class="img-responsive"></a> 
            <!--<div class="carousel-caption"> </div>--> 
          </div>
        </div>
        <a class="left carousel-control" href="#focusslide" role="button" data-slide="prev" rel="nofollow"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">上一个</span> </a> <a class="right carousel-control" href="#focusslide" role="button" data-slide="next" rel="nofollow"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">下一个</span> </a> </div>
      <article class="excerpt-minic excerpt-minic-index index-tuijian">
        <h2><span style="color:#3399CC;">【今日推荐】</span><a href="" title="">从下载看我们该如何做事</a></h2>
        <p class="note">一次我下载几部电影，发现如果同时下载多部要等上几个小时，然后我把最想看的做个先后排序，去设置同时只能下载一部，结果是不到一杯茶功夫我就能看到最想看的电影。 这就像我们一段时间内想干成很多事情，是同时干还是有选择有顺序的干，结果很不一样。同时...</p>
      </article>
      <div class="title">
        <h3>最新发布</h3>
        <div class="more"><a href="#">PHP</a><a href="#">JavaScript</a><a href="#">EmpireCMS</a><a href="">Apache</a><a href="#">MySQL</a></div>
      </div>
      <!-- 文章显示页面 -->
     
      <div id="loadButton" align="center" style="margin-top: 5px">
    	  <a id="loadArticle" href="javascript:void(0);"  style="color: #999999;text-decoration:none;" >加载更多</a>
    	  <img id="loadArticleGif" style="display: none" src="/images/loading2.gif">
      </div>
      
    </div>
  </div>
  <jsp:include page="common/right.jsp"/>
</section>
<jsp:include page="common/footer.jsp" />
<script src="/js/bootstrap.min.js"></script> 
<script src="/js/jquery.ias.js"></script> 
<script src="/js/scripts.js"></script>
<script src="/js/console.js"></script>
<script type="text/javascript">
	var currentPage=1;//初始状况下currentPage=1
	$(function(){
		loadArticle(currentPage,5);
		$("#loadArticle").click(function(){
			currentPage++;
			$("#loadArticleGif").css("display","inline");
			loadArticle(currentPage,5);
		});
	});
	
	function loadArticle(currentPage,countItem){
		$.post(
			"${pageContext.request.contextPath}/article/loadArticleLimit.action",
			{"currentPage":currentPage,"countItem":countItem},
			function(data){
				var content="";
				if(data.length==0||currentPage==5){
					$("#loadButton").empty();
					content="<a id='loadArticle' href='javascript:void(0);'  style='color: #999999;text-decoration:none;' >已经到底了</a>";
					$("#loadButton").append(content);
				}else{
					for(var i=0;i<data.length;i++){
						var url="${pageContext.request.contextPath}/article/"+data[i].category.alias+"/"+data[i].id+".html";
						content+="<article style='cursor:pointer;' onclick=\"window.location.href='"+url+"'\" class='excerpt excerpt-1'><a class='focus' href='"+url+"' title=''></a><header><a class='cat' href='"+url+"'>"+data[i].category.name+"<i></i></a><h2><a href='"+url+"' title=''>"+data[i].briefTitle30+"</a></h2></header><p class='meta'><time class='time'><i class='glyphicon glyphicon-time'></i> "+data[i].stringUpdatetime+"</time><span class='views'><i class='glyphicon glyphicon-eye-open'></i> 共"+data[i].visitNum+"人围观</span><a class='comment' href='${pageContext.request.contextPath}/article/"+data[i].category.alias+"/"+data[i].id+".html'><i class='glyphicon glyphicon-comment'></i> "+data[i].commentNum+"个不明物体</a></p><p class='note'>"+data[i].summary+"</p></article>";
					}
					$("#loadArticleGif").css("display","none");
					$("#loadButton").before(content);
				}
				
			},
			"json"
		);
	}
</script>
</body>
</html>
